/*
 * @Author: your name
 * @Date: 2021-10-02 21:55:17
 * @LastEditTime: 2021-10-11 20:44:54
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \vue3.0\vue3_vite\src\routes\index.js
 */
import { createRouter, createWebHashHistory } from "vue-router"

const Hello = () => import("@/pages/hello.vue")
const Home = () => import("@/pages/home.vue")
const Login = () => import("@/pages/login.vue")

export const routes = [
  { 
    id: '1',
    path: "/", 
    // layout: false,
    component: Home,
    redirect: "/ref",
    children: [
      {
        id: '5',
        path: "/ref",
        name: "ref",
        component: () => import('@/pages/RouterView.vue'),
        children: [
          {
            id: '6',
            path: "/ref",
            name: "ref",
            component: () => import("@/pages/Ref_learn/ref.vue"),
          },
          {
            id: '7',
            path: "/unref",
            name: "unref",
            component: () => import("@/pages/Ref_learn/unref.vue"),
          },
          {
            id: '8',
            path: "/toRef",
            name: "toRef",
            component: () => import("@/pages/Ref_learn/toRef.vue"),
          },
          {
            id: '9',
            path: "/toRefs",
            name: "toRefs",
            component: () => import("@/pages/Ref_learn/toRefs.vue"),
          },
          {
            id: '10',
            path: "/customRef",
            name: "*customRef",
            component: () => import("@/pages/Ref_learn/customRef.vue"),
          },
          {
            id: '11',
            path: "/shallowRef",
            name: "*shallowRef",
            component: () => import("@/pages/Ref_learn/shallowRef.vue"),
          }
        ]
      },
      {
        id: '100',
        path: "/period",
        name: "生命周期",
        component: () => import('@/pages/RouterView.vue'),
        children: [
          {
            id: '101',
            path: "/period",
            name: "生命周期1",
            component: () => import("@/pages/period/period1.vue"),
          }
        ]
      },
      {
        id: '200',
        path: "/connection",
        name: "组件通信",
        component: () => import('@/pages/RouterView.vue'),
        children: [
          {
            id: '201',
            path: "/connection",
            name: "组件通信1",
            component: () => import("@/pages/connection/test1/father.vue"),
          },
          {
            id: '202',
            path: "/connection2",
            name: "provide/inject_2.0",
            component: () => import("@/pages/connection/test2/father.vue"),
          },
          {
            id: '203',
            path: "/connection3",
            name: "provide/inject_3.0",
            component: () => import("@/pages/connection/test3/father.vue"),
          },
          {
            id: '204',
            path: "/connection4",
            name: "slot",
            component: () => import("@/pages/connection/test4/index.vue"),
          }
        ]
      },
      {
        id: '300',
        path: "/watch",
        name: "watch",
        component: () => import('@/pages/RouterView.vue'),
        children: [
          {
            id: '301',
            path: "/watch",
            name: "watch",
            component: () => import("@/pages/watch/watch/index.vue"),
          },
          {
            id: '302',
            path: "/watchEffect",
            name: "watchEffect",
            component: () => import("@/pages/watch/watchEffect/index.vue"),
          },
          {
            id: '303',
            path: "/computed",
            name: "computed",
            component: () => import("@/pages/watch/computed.vue"),
          },
        ]
      },
      {
        id: '400',
        path: "/list",
        name: "list",
        component: () => import('@/pages/RouterView.vue'),
        children: [
          {
            id: '401',
            path: "/list/list",
            name: "list1",
            component: () => import("@/pages/List/list.vue"),
          },
          {
            id: '402',
            path: "/list/list2",
            name: "list2",
            component: () => import("@/pages/List/list2.vue"),
          },
        ]
      },
      {
        id: '500',
        path: "/vuexTest",
        name: "vuexTest",
        component: () => import('@/pages/RouterView.vue'),
        children: [
          {
            id: '501',
            path: "/vuexTest/index",
            name: "vuexTest1",
            component: () => import("@/pages/vuexTest/index.vue"),
          },
        ]
      }
    ]
  },
]

export const router = createRouter({
  history: createWebHashHistory(),
  routes: routes
})